<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>province</title>

    <script type="text/javascript">

      //初始化省市的值
      var provinces = ["黑龙江","辽宁","吉林"]
      var cities = [["哈尔滨","齐齐哈尔","大庆"],["沈阳","大连","本溪"],["长春","四平","德惠"]]

      window.onload = function (){

          //获取省和市的元素节点对象
          var province = document.getElementById("province");
          var city = document.getElementById("city");

          //初始化最开始的两个下拉框
          province[0] = new Option("--请选择--",0);
          city[0] = new Option("--请选择--",0);

          //遍历所有的省份，添加到省份的下拉列表中
          for(var i in provinces){
              //因为 请选择 已经占有了一个位置，其他省份需要从位置为1开始添加
              province[parseInt(i)+1] = new Option(provinces[i],parseInt(i)+1)
          }

          //如果省份内容发生变化，需要绑定 onchange 事件
          province.onchange = function (){

              city.length = 0;

              //获取省份的索引，作为城市的数组索引
              var cityIndex = province.value;

              //如果省份选择的是第0个位置 即 --请选择-- 此时的城市也得显示这个
              if(cityIndex == 0){
                  city[0] = new Option("--请选择--",0);
              }else{
                  //获取到相应省份对应的城市数组
                  var cityOption = cities[cityIndex-1];
                  for(var i in cityOption){
                      city[i] = new Option(cityOption[i],i);
                  }
              }
          }

      }

    </script>

</head>
<body>

  <select id="province"></select>省
  <select id="city"></select>市

</body>
</html>